<template>
	<app-layout>
		<view class="bazaar-page" v-if="config.bazaar_page">
			<view class="bazaar-serach">
				<uni-search-bar v-model="serachStr" radius="100" placeholder="仅支持搜索作品" clearButton="auto"
					cancelButton="auto" @input="onSearch" bgColor="#000000" />
			</view>
			<view class="bazaar-tabs">
				<view :class="['item', activeTab === 1 ? 'active' : '']" @click="onTabTypeClick">
					{{prodConf[activeTypeIndex].name}}
				</view>
				<view :class="['item', activeTab === 2 ? 'active' : '']" @click="onMoreListClick">
					{{ activeList === 1 ? prodClassify[activeListIndex] ? prodClassify[activeListIndex].name : '全部' : boxClassify[activeListIndex] ? boxClassify[activeListIndex].name : '全部' }}
				</view>
				<view :class="['item', activeTab === 3 ? 'active' : '']" @click="onOtherClick">
					{{otherConf[activeOtherIndex].name}}
				</view>
			</view>

			<view class="bazaar_list">
				<view class="list" v-show="activeList == 1">
					<view class="item" v-for="item in prodArr" :key="item.id"
						@click="$tool.navigateTo(`/pages/bazaar/detail?id=${item.id}`)">
						<!-- <view class="prod-status">热卖中</view> -->
						<view class="prod-img">
							<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
						</view>
						<view class="prod-info">
							<text class="name">{{item.worksName}}</text>
							<text class="other">#{{item.worksNum}}/{{item.total}}</text>
						</view>
						<view class="prod-bay">
							<text class="price">￥ {{item.price}}</text>
							<text class="bay"></text>
						</view>
					</view>
				</view>
				<view class="list" v-show="activeList == 2">
					<view class="item" v-for="item in boxArr" :key="item.id">
						<!-- <view class="prod-status">{{item.boxStatusName}}</view> -->
						<view class="prod-img">
							<image class="prod-img" :src="item.subPctureUrl" mode=""></image>
						</view>
						<view class="prod-info">
							<text class="name">{{item.boxName}}</text>
							<text class="other">总量 {{item.total}} ￥ {{item.price}}</text>
						</view>

						<button class="prod-box-bay" type="default">
							<view class="prod-bay-content" @click=" $tool.onConfirmclick(onPayClick, item)">
								<text>立即购买</text>
								<view class="bay-right"></view>
							</view>
						</button>
					</view>
				</view>
			</view>

			<uni-load-more class="loadMore" :contentText="contentText" @clickLoadMore="onClickLoadMore"
				:status="queryStatus">
			</uni-load-more>
		</view>

		<!-- 作品 盲盒 选择-->
		<uni-popup ref="type_ref" type="bottom">
			<view class="popup">
				<view class="title">{{prodConf[activeTypeIndex].name}}</view>
				<view class="content">
					<view class="item" v-for="item in prodConf" :key="item.name" @click="onTypeChange(item.type)">
						<view :class="['text', item.active ? 'active' : '']">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 更多 作品分类-->
		<uni-popup ref="more_prod_ref" type="right">
			<view class="popup more_popup">
				<view class="title">
					<view class="line"></view>
					{{ prodClassify[activeListIndex] ? prodClassify[activeListIndex].name : '全部' }}
				</view>
				<scroll-view class="otherList" scroll-y="true">
					<view class="content">
						<view class="item" v-for="(item,index) in prodClassify" :key="item.name"
							@click="onProdMoreListItemClick(index, item.name)">
							<view :class="['text', item.active ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="title secondaryTitle">
					<view class="line"></view>藏品
				</view>
				<scroll-view class="otherList" scroll-y="true">
					<view class="content secondaryContent" v-if="secondary.length">
						<view class="item" v-for="item,index in secondary" :key="item.id"
							@click="onSecondaryItemClick(item.name, index)">
							<view :class="['text', item.active ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 更多 盲盒分类-->
		<uni-popup ref="more_box_ref" type="bottom">
			<view class="popup">
				<view class="title">
					<view class="line"></view>
					{{ boxClassify[activeListIndex] ? boxClassify[activeListIndex].name : '全部'}}
				</view>
				<scroll-view class="otherList" scroll-y="true">
					<view class="content">
						<view class="item" v-for="(item,index) in boxClassify" :key="item.name"
							@click="onBoxMoreListItemClick(index, item.name)">
							<view :class="['text', item.active ? 'active' : '']">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<!-- 其他配置 -->
		<uni-popup ref="other_ref" type="bottom">
			<view class="popup">
				<view class="title">{{otherConf[activeOtherIndex].name}}</view>
				<view class="content">
					<view class="item" v-for="item,index in otherConf" :key="item.name"
						@click="onOtherConfClick(index, item.type)">
						<view :class="['text', item.active ? 'active' : '']">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<view class="bazaar-hint" v-if="!config.bazaar_page">
			<app-title text="温馨提示" :width="64"></app-title>
			<view class="hint-text">为保障新品顺利发行，特暂停市场，新品售罄后开放市场。</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		createBalancePay
	} from '../../request/common-api.js'
	import {
		getboxMarketPage,
		getMarketWorksPage,
		getMarketCondition,
		selectCategoryListForApp
	} from '../../request/bazaar.js'
	import {
		isWeiXin,
		objKeySort,
		encryptStr,
		getUserinfo,
		setStringStyle,
	} from '../../utils/utils.js'

	const delay = (function() {
		let timer = 0
		return function(callback, ms) {
			clearTimeout(timer)
			timer = setTimeout(callback, ms)
		}
	})()
	export default {
		data() {
			return {
				// tab选项控制
				activeTab: 1,
				// 作品列表控制
				activeList: 1,
				// 分类 下标
				activeTypeIndex: 0,
				// 更多 下标
				activeListIndex: 0,
				secondaryIndex: 0,
				// 其他 下标
				activeOtherIndex: 0,
				// 作品
				prodArr: [],
				// 盲盒
				boxArr: [],
				// 作品下分类
				prodClassify: [],
				// 盲盒··下分类
				boxClassify: [],
				// 作品二级分类
				secondary: [],
				// 产品配置
				prodConf: [{
						name: '艺术藏品',
						type: 'WORKS',
						active: true
					},
					{
						name: '盲盒',
						type: 'BOX',
						active: false
					},
				],
				// 其它配置
				otherConf: [{
						name: '最新上架',
						type: 'SELL',
						active: true
					},
					{
						name: '价格从低到高',
						type: 'ASC',
						active: false
					},
					{
						name: '价格从高到低',
						type: 'DESC',
						active: false
					},
				],
				// 没有更多了
				isNoMore: false,
				// 加载状态
				queryStatus: 'more',
				// 各状态文字说明
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				// 查询参数
				params: {
					condition: {
						name: "",
						productType: "WORKS",
						sortRule: "SELL",
						sortType: "DESC",
						studioId: "",
						worksName: ""
					},
					pageNum: 0,
					pageSize: 10
				},
				// old
				boxPage: 0,
				prodPage: 0,
				// 搜索字符串
				serachStr: ''
			}
		},
		watch: {
			serachStr: {
				handler(n) {
					delay(() => {
						this.prodArr = []
						this.prodPage = 0
						this.activeList = 1
						this.activeTypeIndex = 0
						this.params.pageNum = 0
						this.params.condition.worksName = n
						this.onLoadWorksListData()
					}, 1000)
				}
			}
		},
		mounted() {
			this.onInitData()
		},

		methods: {
			// 初始化
			onInitData() {
				let local = uni.getStorageSync('bazaar')
				let data = local ? JSON.parse(local) : ''
				if (data) {
					this.params = data
					if (data.condition.sortRule === 'SELL') {
						this.otherConf[0].active = true
						this.otherConf[1].active = false
						this.otherConf[2].active = false
						this.activeOtherIndex = 0
					} else {
						if (data.condition.sortType === 'ASC') {
							this.activeOtherIndex = 1
							this.otherConf[0].active = false
							this.otherConf[1].active = true
							this.otherConf[2].active = false
						} else if (data.condition.sortType === 'DESC') {
							this.activeOtherIndex = 2
							this.otherConf[0].active = false
							this.otherConf[1].active = false
							this.otherConf[2].active = true
						}
					}
					if (data.condition.productType === "BOX") {
						this.activeList = 2
						this.activeTypeIndex = 1
						this.prodConf[0].active = false
						this.prodConf[1].active = true
						this.onLoadBoxClassify(data.condition.name)
						this.onLoadBoxsListData()
					} else {
						let prod_frist_name = uni.getStorageSync('prod_frist_name')
						let prod_second_name = uni.getStorageSync('prod_second_name')
						this.activeList = 1
						this.activeTypeIndex = 0
						this.prodConf[0].active = true
						this.prodConf[1].active = false
						this.params.condition.name = ''
						this.params.condition.worksName = prod_second_name ? prod_second_name : ''
						this.onLoadProdClassify(prod_frist_name ? prod_frist_name : '', prod_second_name ?
							prod_second_name : '')
						this.onLoadWorksListData()
					}
				} else {
					this.onLoadProdClassify()
					this.onLoadWorksListData()
				}

			},

			onSearch(val) {
				console.log(val)
			},

			// 点击加载更多
			onClickLoadMore() {
				if (!this.isNoMore) {
					if (this.activeList === 1) {
						this.onLoadWorksListData()
					} else {
						this.onLoadBoxsListData()
					}
				}
			},

			// popup 切换
			onTogglePopup(show, refName, direction = "bottom") {
				this.$tool.popupToggle(show, this, refName, direction)
			},

			// 类型点击
			onTabTypeClick() {
				this.activeTab = 1
				this.onTogglePopup(true, 'type_ref')
			},

			// 类型
			onTypeChange(type) {
				this.boxPage = 0
				this.prodPage = 0
				this.params.pageNum = 0
				this.activeListIndex = 0
				this.isNoMore = false
				this.queryStatus = 'more'
				this.params.condition.name = ''
				this.params.condition.worksName = ''
				this.secondary = []
				if (type === 'WORKS') {
					this.prodArr = []
					this.activeList = 1
					this.activeTypeIndex = 0
					this.onLoadProdClassify()
					this.prodConf[0].active = true
					this.prodConf[1].active = false
					this.onLoadWorksListData()
				} else {
					this.boxArr = []
					this.activeList = 2
					this.activeTypeIndex = 1
					this.onLoadBoxClassify()
					this.prodConf[1].active = true
					this.prodConf[0].active = false
					this.onLoadBoxsListData()
				}
				this.onTogglePopup(false, 'type_ref')
				uni.setStorageSync('activeTypeIndex', this.activeTypeIndex)
			},

			// 更多
			onMoreListClick() {
				this.activeTab = 2
				if (this.activeTypeIndex === 0) {
					this.onTogglePopup(true, 'more_prod_ref', 'right')
				} else {
					this.onTogglePopup(true, 'more_box_ref', 'bottom')
				}
			},

			// 盲盒小分类点击
			onBoxMoreListItemClick(_index, name) {
				this.activeListIndex = _index
				this.boxClassify.map((item, index) => {
					if (_index === index) {
						item.active = true
					} else {
						item.active = false
					}
					return item
				})
				this.boxPage = 0
				this.boxArr = []
				this.params.condition.productType = "BOX"
				this.params.condition.name = name === '全部' ? '' : name
				this.onLoadBoxsListData()
				this.onTogglePopup(false, 'more_box_ref')
			},

			// 作品小分类点击
			onProdMoreListItemClick(_index, name) {
				this.activeListIndex = _index
				this.prodClassify.map((item, index) => {
					if (_index === index) {
						this.secondary = item.categoryVOList
						item.active = true
					} else {
						item.active = false
					}
					return item
				})
				if (name === '全部') {
					this.prodPage = 0
					this.prodArr = []
					this.secondary = []
					this.params.condition.name = ''
					this.params.condition.worksName = ''
					this.params.condition.productType = "WORKS"
					uni.removeStorageSync('prod_frist_name')
					uni.removeStorageSync('prod_second_name')
					this.onTogglePopup(false, 'more_prod_ref')
					this.onLoadWorksListData()
				}
			},

			// 作品二级分类点击
			onSecondaryItemClick(name, _index) {
				this.secondaryIndex = _index
				this.secondary.map((item, index) => {
					if (_index === index) {
						item.active = true
					} else {
						item.active = false
					}
					return item
				})
				this.prodArr = []
				this.prodPage = 0
				this.params.condition.name = ''
				this.params.condition.worksName = name
				this.params.condition.productType = "WORKS"
				this.onLoadWorksListData()
				this.onTogglePopup(false, 'more_prod_ref')
				uni.setStorageSync('prod_frist_name', this.prodClassify[this.activeListIndex].name)
				uni.setStorageSync('prod_second_name', this.secondary[this.secondaryIndex].name)
			},

			// 其他配置
			onOtherClick() {
				this.onTogglePopup(true, 'other_ref', 'bottom')
			},
			onOtherConfClick(_index, type) {
				this.activeOtherIndex = _index
				this.otherConf.map((item, index) => {
					if (_index === index) {
						item.active = true
					} else {
						item.active = false
					}
					return item
				})
				if (type === "SELL") {
					this.params.condition.sortRule = 'SELL'
					this.params.condition.sortType = 'DESC'
				} else if (type === "DESC") {
					this.params.condition.sortRule = 'PRICE'
					this.params.condition.sortType = 'DESC'
				} else if (type === "ASC") {
					this.params.condition.sortRule = 'PRICE'
					this.params.condition.sortType = 'ASC'
				}
				if (this.activeList === 1) {
					this.prodArr = []
					this.prodPage = 0
					this.params.condition.productType = "WORKS"
					this.onLoadWorksListData()
				} else {
					this.boxArr = []
					this.boxPage = 0
					this.params.condition.productType = "BOX"
					this.onLoadBoxsListData()
				}
				this.onTogglePopup(false, 'other_ref', 'bottom')
			},

			// 盲盒分类
			async onLoadBoxClassify(name) {
				try {
					let {
						code,
						data,
						message
					} = await getMarketCondition('BOX')
					if (code === 200) {
						this.boxClassify = data.map((item, index) => {
							if (name === item.name) {
								item.active = true
								this.activeListIndex = index + 1
							} else {
								item.active = false
							}
							return item
						})
						this.boxClassify.unshift({
							name: '全部',
							active: name ? false : true
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch {
					this.$tool.showErr(err)
				}
			},

			// 作品分类
			async onLoadProdClassify(name, second_name) {
				try {
					let {
						code,
						data,
						message
					} = await selectCategoryListForApp()
					if (code === 200) {
						this.prodClassify = data.categoryVOList.map((item, index) => {
							if (name === item.name) {
								item.active = true
								this.activeListIndex = index + 1
								item.categoryVOList.map((se, _index) => {
									if (se.name === second_name) {
										this.secondaryIndex = _index
										se.active = true
									} else {
										se.active = false
									}
									return se
								})
								this.secondary = item.categoryVOList
							} else {
								item.active = false
								item.categoryVOList.map((se) => {
									se.active = false
									return se
								})
							}
							return item
						})
						this.prodClassify.unshift({
							name: '全部',
							active: name ? false : true
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},

			// 加载作品数据
			async onLoadWorksListData() {
				uni.showLoading({
					title: '加载中...'
				})
				this.queryStatus = 'loading'
				this.params.pageNum = this.prodPage + 1
				this.prodPage = this.params.pageNum
				this.params.condition.productType = 'WORKS'
				try {
					let {
						code,
						message,
						data
					} = await getMarketWorksPage(this.params)
					if (code === 200) {
						if (this.params.pageNum <= data.totalPage) {
							this.isNoMore = false
							this.prodArr.push(...data.list)
							this.queryStatus = 'more'
							uni.setStorageSync('bazaar', JSON.stringify(this.params))
						} else {
							this.isNoMore = true
							this.queryStatus = 'noMore'
						}
					} else {
						this.queryStatus = 'more'
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.queryStatus = 'more'
					this.$tool.showErr(err)
				}
				uni.hideLoading()
			},

			// 加载盲盒数据
			async onLoadBoxsListData() {
				this.queryStatus = 'loading'
				this.params.pageNum = this.boxPage + 1
				this.boxPage = this.params.pageNum
				this.params.condition.productType = 'BOX'
				try {
					let {
						code,
						message,
						data
					} = await getboxMarketPage(this.params)
					if (code === 200) {
						if (this.params.pageNum <= data.totalPage) {
							this.isNoMore = false
							this.boxArr.push(...data.list)
							this.queryStatus = 'more'
							uni.setStorageSync('bazaar', JSON.stringify(this.params))
						} else {
							this.isNoMore = true
							this.queryStatus = 'noMore'
						}
					} else {
						this.queryStatus = 'more'
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.queryStatus = 'more'
					this.$tool.showErr(err)
				}
			},

			// 点击购买
			async onPayClick(detail) {
				uni.showLoading({
					title: "加载中..."
				})
				try {
					let key = ''
					let user = getUserinfo()
					let time = new Date().getTime()
					let nonceStr = parseInt(Math.random() * (1000000000, 10000000000))
					let params = {
						actualPaymentAmount: detail.price,
						goodsTitle: detail.boxName,
						orderPlatform: isWeiXin() ? 'WECHAT' : 'ALIPAY',
						productId: detail.id,
						productType: 'BOX',
						remark: detail.boxName,
						nonceStr: nonceStr,
						timestamp: time,
						tradeType: isWeiXin() ? 'JSAPI' : 'MWEB'
					}
					params = objKeySort(params)
					console.log(params)
					for (let i in params) {
						key += i + '=' + params[i] + '&'
					}
					params.sign = encryptStr(key + 'sign_key')
					let {
						code,
						message,
						data
					} = await createBalancePay(params)
					if (code === 200) {
						uni.navigateTo({
							url: `/pages/blindBox/pay?id=${data}`,
							animationType: 'pop-in',
							animationDuration: 200
						})
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
					uni.hideLoading()
				} catch (err) {
					this.$tool.showErr(err)
				}
			},
		},

		// 上啦刷新
		onPullDownRefresh() {
			this.boxArr = []
			this.prodArr = []
			this.boxPage = 0
			this.prodPage = 0
			this.params.pageNum = 0
			this.queryStatus = 'more'
			this.isNoMore = false
			this.onClickLoadMore()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},

		// 到底加载
		onReachBottom() {
			this.onClickLoadMore()
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .main {
		padding: 0;
	}

	.bazaar-page {
		width: 100%;
		min-height: 100vh;
	}

	.bazaar-serach {
		padding: 0 20rpx;

		/deep/ .uni-searchbar__box {
			background: linear-gradient(45deg, #050505, #383838);
		}

		/deep/.uni-searchbar__cancel {
			color: #B9B9B9;
		}

		/deep/.uni-input-input {
			color: #B9B9B9;
		}
	}

	.bazaar-tabs {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: sticky;
		top: 0rpx;
		left: 0;
		z-index: 2;
		background-color: #262529;

		.item {
			flex: 1;
			text-align: center;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #BFCBCD;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 10rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.item:after {
			content: "";
			width: 60rpx;
			height: 2rpx;
			margin-top: 10rpx;
			border-radius: 22rpx;
			border: 2px solid rgba(0, 0, 0, 0);
		}

		.active {
			color: #FFBD47;
		}

		.active:after {
			content: "";
			width: 60rpx;
			height: 2rpx;
			margin-top: 10rpx;
			border-radius: 22rpx;
			background-color: #FFBD47;
		}
	}

	.bazaar_list {
		.list {
			padding: 0 20rpx;
			margin: 0 0 20rpx 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.item {
			width: 334rpx;
			height: 540rpx;
			margin-bottom: 40rpx;
			background: linear-gradient(218deg, #3E454D 0%, #26252A 100%);
			box-shadow: -6rpx -6rpx 16rpx 0px rgba(70, 75, 86, 0.54), 6rpx 6rpx 16rpx 0px rgba(0, 0, 0, 0.83);
			border-radius: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.prod-img {
				width: 334rpx;
				height: 334rpx;
				overflow: hidden;
				border-radius: 32rpx;
				background-color: #474A51;

				.img {
					width: 334rpx;
					height: 334rpx;
				}
			}

			.prod-status {
				width: 180rpx;
				height: 65rpx;
				line-height: 70rpx;
				text-indent: 10rpx;
				position: absolute;
				top: -2rpx;
				left: -2rpx;
				z-index: 1;
				background: $mine-prod-back-url no-repeat;
				background-position: top left;
				background-size: 100% 100%;
				font-size: 16px;
				font-family: YouSheBiaoTiHei;
				color: #BFCBCD;
				line-height: 65rpx;
				padding-left: 20rpx;
			}

			.prod-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				color: #BFCBCD;

				.name {
					width: 300rpx;
					font-size: 32rpx;
					font-weight: bold;
					line-height: 48rpx;
					margin-bottom: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.other {
					width: 100%;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 18px;
					margin-bottom: 14rpx;
				}
			}

			.prod-bay {
				width: 100%;
				width: 310rpx;
				display: flex;
				justify-content: space-between;

				.price {
					min-width: 100rpx;
					height: 50rpx;
					background: #FFBD47;
					border-radius: 26rpx;
					font-size: 24rpx;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					font-weight: bold;
					color: #1B1D24;
					line-height: 50rpx;
					padding: 0 10rpx;
				}

				.bay {
					width: 50rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: -12rpx -12rpx 24rpx 0px rgba(66, 69, 76, 0.54), 12rpx 12rpx 24rpx 0px rgba(0, 0, 0, 0.83);
					border: 2rpx solid #FFBD47;
					border-radius: 50%;
					background: $common-right-url no-repeat;
					background-size: 60% 60%;
					background-position: center center;
					background-color: #1B1D24;
					margin-right: 15rpx;
				}
			}

			.prod-box-bay {
				width: 350rpx;
				height: 196rpx;
				font-size: 14px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #FFBD47;
				position: absolute;
				bottom: -80rpx;
				background: $common-bay-url no-repeat;
				background-size: 350rpx 200rpx;
				background-position: center center;
				display: flex;
				align-items: center;
				justify-content: center;

				.prod-bay-content {
					width: 240rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 1;
				}

				.bay-right {
					width: 40rpx;
					height: 40rpx;
					margin-left: 10rpx;
					background: $common-right-url no-repeat;
					background-size: 100% 100%;
					background-position: center center;
				}
			}

			.prod-box-bay:after {
				border: none;
			}
		}
	}

	.bazaar-hint {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.hint-text {
			color: #BFCBCD;
			margin-top: 20rpx;
		}
	}

	.popup {
		width: 100%;
		min-height: 300rpx;
		max-height: 90%;
		background: $login-resetbakc-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 0;

		.title {
			line-height: 60rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #BFCBCD;
			margin-bottom: 20rpx;
		}

		.otherList {
			max-height: 800rpx;
		}

		.secondaryTitle {
			margin-top: 20rpx;
		}

		.content {
			width: 100%;
			min-height: 100rpx;
			display: flex;
			flex-wrap: wrap;
			background-color: #2b2a2f;
		}

		.secondaryContent {
			min-height: 100rpx;
		}

		.item {
			width: 50%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20rpx 0;

			.text {
				width: 320rpx;
				height: 90rpx;
				border-radius: 54rpx;
				border: 2rpx solid #979797;
				font-size: 14px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #BFCBCD;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
				text-align: center;
			}

			.active {
				color: #FFBD47;
				border: none;
				box-shadow: rgba(0, 0, 0, 0.17) 0rpx -23rpx 25rpx 0rpx inset, rgba(0, 0, 0, 0.15) 0rpx -36rpx 30rpx 0rpx inset, rgba(0, 0, 0, 0.1) 0rpx -79rpx 40rpx 0rpx inset, rgba(0, 0, 0, 0.06) 0rpx 2rpx 1rpx, rgba(0, 0, 0, 0.09) 0rpx 4rpx 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
				background: linear-gradient(45deg, #050505, #383838);
			}
		}
	}

	.more_popup {
		width: 560rpx;
		height: 100%;
		max-height: 100%;
		background-color: #2b2a2f;
		padding: 40rpx 20rpx;

		.title {
			width: 100%;
			display: flex;
			align-items: center;

			.line {
				width: 4rpx;
				height: 60%;
				border-radius: 20rpx;
				margin: 0 10rpx 0 0;
				background-color: #FFBD47;
			}
		}

		.otherList {
			min-height: 200rpx;
			max-height: 40vh;

			.item {
				height: auto;

				.text {
					width: 240rpx;
					height: auto;
					min-height: 60rpx;
					max-height: 90rpx;
					padding: 10rpx;
				}
			}
		}
	}

	.loadMore {
		margin-bottom: 40rpx;
	}

	.empty {
		text-align: center;
		color: #9D9D9D;
	}
</style>
